<template>
	<view class="details-card-box">
		<view class="details-card-item" v-for="item in list" :key="item.label">
			<view class="details-card-label">{{ item.label }} </view>
			<view class="details-card-value"><text class="name" v-if="item.type=='name' "> {{ item.value }}</text><text
					class="num" v-else> {{ item.value }} </text>{{ item.unit }}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from "vue";
	const proos = defineProps({
		list: {
			type: Object,
			default: new Object(),
		},
	});
</script>

<style lang="less" scoped>
	.details-card-box {
		width: 100%;
		height: auto;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center;

		.details-card-item {
			width: 30%;
			height: 150rpx;
			text-align: center;

			.details-card-label {
				font-size: @font-size-23;
				color: @color-grey;
			}

			.details-card-value {
				font-size: @font-size-31;
				color: @color-black;
				height: 60rpx;
				line-height: 60rpx;

				.name {
          font-family: 'ali' ;
          font-weight: 400;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;

				}

				.num {
          font-family: 'ali' ;
          font-weight: 400;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;

				}
			}
		}
	}
</style>
